<template>
	<div class="login-wrapper login_panel-container">
		<div class="login-bg">
			<img src="../assets/login/login-bg.png" alt="">
		</div>

		<div class="login-form">
			<div class="top-title banner-list ">
				<div data-v-04e57901="" class="swiper-slide swiper-slide-prev swiper-slide-duplicate-next"
					data-swiper-slide-index="2" style="height: 51px;">
					<div data-v-04e57901="" class="item">
						<div data-v-04e57901="" class="img-list"><img data-v-04e57901=""
								src="https://img.didapinche.com/pics/150x150/g/img_other_06.png" alt="img"><img
								data-v-04e57901="" src="https://img.didapinche.com/pics/150x150/g/img_other_05.png"
								alt="img"><img data-v-04e57901=""
								src="https://img.didapinche.com/pics/150x150/g/img_other_21.png" alt="img"></div>
						<div data-v-04e57901="" class="title">
							<p class="content">有<span class="highLight">{{ number1 }}</span>位乘客发布新订单，最高愿付<span
									class="highLight">{{ number2 }}</span>元</p>
						</div>
					</div>
				</div>
			</div>
			<van-form @submit="onSubmit">
				<van-field v-model="phone" name="phone" label="" placeholder="请输入手机号" type="tel" maxlength="11" />
				<van-field v-model="code" name="code" label="" placeholder="请输入验证码" maxlength="6">
					<template #button>
						<van-button class="login-code-button" size="small" type="primary" :disabled="countdown > 0"
							@click="sendCode">
							{{ countdown > 0 ? countdown + 's' : '获取验证码' }}
						</van-button>
					</template>
				</van-field>
				<div class="submit-wrapper">
					<van-button class="submit-button" :class="phone && code ? 'submit-button-active' : ''" round block type="info" native-type="submit">
						登录
					</van-button>
				</div>
			</van-form>

			<div class="login-middle-title">@ 助力嘀嗒顺风车</div>
		</div>
	</div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { showNotify } from 'vant';
import { loginApi } from '@/api/index';
import { cardKey } from '@/config/url';

export default {
	name: 'loginPage',
	setup() {
		const phone = ref('');
		const code = ref('');
		const countdown = ref(0);
		let timer = null;
		let timer2 = null;
		const number1 = ref(100);
		const number2 = ref(120);



		// 每3秒随机增加0~10
		const updateNumbers = () => {
			number1.value += Math.floor(Math.random() * 11); // 0~10
			number2.value += Math.floor(Math.random() * 11); // 0~10
		};

		onMounted(() => {
			timer2 = setInterval(updateNumbers, 5000);
		});

		onBeforeUnmount(() => {
			clearInterval(timer2);
		});

		const sendCode = () => {
			if (!/^1\d{10}$/.test(phone.value)) {
				showNotify({ type: 'warning', message: '请输入正确的手机号' });
				return;
			}

			loginApi.getAuthCode({
				cardKey,
				phoneNumber: phone.value
			}).then(res => {
				countdown.value = 30;
				showNotify({ type: 'success', message: res });
			});

			timer = setInterval(() => {
				countdown.value--;
				if (countdown.value <= 0) {
					clearInterval(timer);
				}
			}, 1000);
		};

		const onSubmit = () => {
			if (!/^1\d{10}$/.test(phone.value)) {
				showNotify({ type: 'warning', message: '请输入正确的手机号' });
				return;
			}
			if (!/\d{4,6}$/.test(code.value)) {
				showNotify({ type: 'warning', message: '请输入正确的验证码' });
				return;
			}

			loginApi.loginByCode({
				cardKey,
				phoneNumber: phone.value,
				code: code.value
			}).then(res => {
				const data = JSON.parse(res.data);

				if (res.code === 0) {
					showNotify({ type: 'success', message: "登录成功" });
					// 跳转首页：router.push('/');
				} else {
					showNotify({ type: 'danger', message: data.message });
				}
			});
		};

		return { phone, code, countdown, sendCode, onSubmit, number1, number2 };
	}
};
</script>

<style lang="less" scoped>
html {
	font-size: 16px;
}

.login-wrapper {
	min-height: 100vh;
	background: #DEF3F7;
	position: relative;
	overflow-x: hidden;
	width: 100vw;
}

.login-bg {
	width: 100vw;
	padding-top: 90vw;
	overflow: hidden;
	position: relative;

	img {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		display: block;
	}
}

.login-form {
	position: relative;
	margin: -5vh auto 0 auto;
	width: 90vw;
	background: linear-gradient(to bottom, #fbecda, #fff 45px, #fff 100%);
	border-radius: 6vw 6vw 0 0;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
	padding: 0 5vw 6vh 5vw;
	min-height: calc(100vh - 90vw);
	z-index: 2;

	.top-title {
		height: 45px;
	}

	.van-field {
		padding: 1vh;
		padding-left: 4vw;
		font-size: 1rem;
		margin-bottom: 3vh;
	}

	.van-cell {
		border: 1px solid #D3D3D3;
		border-radius: 50px !important;
		background: transparent;
	}

	/deep/ .van-cell__value {
		display: flex;
		align-items: center;
		width: 100%;
		height: 2.083vw;
		min-height: 40px;

		.van-field__body {
			width: 100%;
		}
	}

	.van-field__control {
		background: transparent;
	}

	.submit-wrapper {
		margin-top: 4vh;
	}

	.van-button--info {
		border: none;
		color: #fff;
		height: 6vh;
		border-radius: 25px;
		font-size: 1rem;
		background: linear-gradient(45deg, #B1B9C1, #CCD3DB);
	}

	.login-code-button {
		color: #1E1E20;
		background-color: #F2F2F4;
		border: none;
		padding: 0 3vw;
		height: 40px;
		border-radius: 50px !important;
	}

	.login-middle-title {
		position: absolute;
		left: 50%;
		bottom: 6vh;
		transform: translateX(-50%);
		font-size: 12px;
		color: #b3b3b4;
	}
}

/* 自适应调整字体 */
@media screen and (max-width: 375px) {
	html {
		font-size: 14px;
	}
}

@media screen and (min-width: 414px) {
	html {
		font-size: 16px;
	}
}

.login_panel-container {
	margin-bottom: 30px;

	&.mb-0 {
		margin-bottom: 0;
	}

	.agree-tip {
		background: #fff;

		.bk {
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			background: #1c1f21;
			opacity: .5;
			z-index: 20;
		}

		.con {
			z-index: 23;
			width: 688px;
			padding-bottom: 30px;
			background: #fff;
			border-radius: 46px 46px 77px 77px;
			position: fixed;
			bottom: constant(safe-area-inset-bottom);
			bottom: env(safe-area-inset-bottom);
			bottom: 30px;
			left: 30px;

			.t-b {
				padding: 30px 30px 48px 30px;
				border-radius: 46px 46px 0 0;
				background: url(https://web-static.didachuxing.com/pics/g/ue0gu6hl7vid.png), #fff;
				background-size: 100% 108px;
				background-repeat: no-repeat;
			}

			.title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 13px;
				color: #1c1f21;
			}

			.sub-title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 23px;
				color: #4d535a;

				span {
					font-weight: 700;
					color: #302929;
				}
			}

			.btn-box {
				display: flex;
				flex-direction: row-reverse;
				margin-top: 30px;
				padding-right: 30px;

				.btn {
					border-radius: 65px;
					padding: 40px 30px;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 35px;
					color: #4d535a;
					background: rgba(28, 31, 33, .06);

					&.sub {
						color: #fff;
						margin-left: 23px;
						background: linear-gradient(135deg, #536287, #010217);
					}
				}
			}
		}
	}

	.swiper-container {
		height: 92px;
	}

	.banner-list {
		height: 60px;
		border-radius: 54px 54px 0 0;
		margin: 2px;
		background: url(https://web-static.didachuxing.com/pics/g/e9gimldb98i333.png);
		background-repeat: no-repeat;
		background-size: 100% 92px;
		background-position: 0 2px;
		overflow: hidden;

		.item {
			display: flex;
			align-items: center;
			height: 62px;
			border-radius: 138.461538px 138.461538px 0 0;

			.img-list {
				position: relative;
				width: 76px;
				height: 38px;
				margin-right: 8px;

				img {
					width: 38px;
					height: 38px;
					border-radius: 100%;
					position: absolute;
					top: 0;
					left: 0;

					&:first-of-type {
						z-index: 99;
					}

					&:nth-child(2) {
						z-index: 98;
						left: 19px;
					}

					&:last-of-type {
						z-index: 97;
						left: 38px;
					}
				}
			}

			.title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 13px;
				color: #181818;
				margin-right: 15px;

				.highLight {
					color: #fe5101;
					font-family: PingFangSC, PingFang SC;
					font-weight: 700;
					font-size: 13px;
				}
			}

			.time {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 23px;
				color: rgba(28, 31, 33, .5);
			}
		}
	}

	.tip-third {
		text-align: center;
		margin-top: 20px;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 23px;
		color: rgba(28, 31, 33, .5);
	}

	.login-form {
		background-color: #fff;
	}

	.input-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		margin-bottom: 25px;

		input {
			flex: 1 1;
			height: 100px;
			background: #fff;
			border-radius: 52px;
			padding-left: 30px;
			font-family: Barlow;
			font-weight: 700;
			font-size: 38px;
			color: #1c1f21;
			border: 2.564103px solid rgba(28, 31, 33, .2);

			&:focus {
				border: 2.564103px solid #fe5101;
			}

			&::placeholder {
				color: rgba(28, 31, 33, .5);
				font-size: 28px;
				position: relative;
				top: 0;
			}

			&::-moz-placeholder {
				color: rgba(28, 31, 33, .5);
				font-size: 28px;
				position: relative;
				top: 0;
			}
		}

		.icon-clear {
			width: 24px;
			height: 24px;
		}

		.left {
			flex: 1 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.verify-btn {
			width: 181px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 25px;
			color: #1c1f21;
			border-radius: 50px;
			background: rgba(206, 213, 220, .3);
			padding: 20px 0;
			text-align: center;
			position: absolute;
			right: 11px;
			top: 11.5px;

			&.verify-btn-notactive {
				color: rgba(28, 31, 33, .5);
			}
		}
	}

	.agreement-row {
		height: 34px;
		display: flex;
		align-items: center;
		margin-bottom: 30px;
		font: 400 24px PingFangSC, PingFangSC-Regular;
		color: #929aa7;

		>img {
			width: 28px;
			height: 28px;
			margin-right: 12px;
		}

		.text-link {
			font-weight: 500;
			color: #23292f;
		}
	}

	.submit-btn {
		height: 130px;
		background: linear-gradient(306deg, #ced5dc, #aeb9c4);
		line-height: 130px;
		border-radius: 54px;
		text-align: center;
		font-size: 36px;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		color: #fff;
	}

	.submit-button-active {
		background: linear-gradient(90deg, #384a78, #010217);
		box-shadow: inset 48.717949px 0 48.717949px 0 #080632, inset -48.717949px 0 48.717949px 0 #2c366a;
	}

	.qrcode-con {
		background: rgba(28, 31, 33, .04);
		padding: 40px 42px 38px 44px;
		display: flex;
		justify-content: space-between;
		border-radius: 46px;
		margin: 0 30px;

		.con-left {
			.logo {
				width: 152px;
				display: block;
				margin-bottom: 12px;
			}

			div {
				font-size: 24px;
				color: #4e556c;
			}
		}

		.qrcode {
			display: block;
			width: 104px;
			height: 104px;
		}
	}
}
</style>
